<template>
  <div class="register_view">
    <h1 class="title">
      <div class="back" @click="$router.push('/login')">
        <van-image
          width="18"
          height="18"
          src="/img/login/left.png"
          alt="left"
        />
      </div>
      <span>注册</span>
    </h1>
    <!-- 账号密码输入 -->
    <div class="import_input">
      <div class="account">
        <input type="text" placeholder="手机号" v-model="account" />
        <div class="clear" v-if="accountFlag" @click="clearAccount">x</div>
      </div>
      <div class="account">
        <input type="password" placeholder="密码" v-model="passWord" />
        <div class="clear" v-if="passWordFlag" @click="clearPassWord">x</div>
      </div>
      <div class="account">
        <input
          type="password"
          placeholder="确认密码"
          v-model="confirmPassWord"
        />
        <div
          class="clear"
          @click="clearConfirmPassWord"
          v-if="confirmPassWordFlag"
        >
          x
        </div>
      </div>
      <!-- 注册按钮 -->
      <div class="button">
        <button @click="register">
          <span>注册</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 账号
      account: "",
      //密码
      passWord: "",
      //确认密码
      confirmPassWord: "",
    };
  },

  mounted() {},

  methods: {
    //点击将账号输入框清空
    clearAccount() {
      this.account = "";
    },
    //点击将密码输入框清空
    clearPassWord() {
      this.passWord = "";
    },
    //点击将确认密码输入框清空
    clearConfirmPassWord() {
      this.confirmPassWord = "";
    },
    //点击注册
    register() {
      let number =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
      if (!number.test(this.account)) {
        this.$toast("请输入正确手机号");
      } else if (
        this.passWord.trim("").length <= 10 ||
        this.confirmPassWord.trim("").length < 10
      ) {
        this.$toast("密码长度最少为11位");
      } else if (this.passWord != this.confirmPassWord) {
        this.$toast("密码不一致");
      } else {
        localStorage.setItem(
          "user",
          JSON.stringify({
            account: this.account,
            passWord: this.confirmPassWord,
          })
        );
        this.$toast("注册成功");
        setTimeout(() => {
          this.$router.push("/otherLogin");
        }, 1000);
      }
    },
  },
  computed: {
    //检测账号是否为空
    accountFlag() {
      return this.account.trim("") == "" ? false : true;
    },
    //检测密码是否为空
    passWordFlag() {
      return this.passWord.trim("") == "" ? false : true;
    },
    //检测确认密码是否为空
    confirmPassWordFlag() {
      return this.confirmPassWord.trim("") == "" ? false : true;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.register_view {
  min-height: 100vmax;
  background-color: #fff;
}
.title {
  position: relative;
  display: flex;
  font-weight: normal;
  font-size: 18px;
  color: #5e5e5e;
  align-items: center;
  border-bottom: 1px solid #c9c7c8;
  .back {
    width: 45px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #7d6363;
  }
  span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.import_input {
  margin-top: 50px;
  position: relative;
  padding: 0 25px;
  .account {
    height: 30px;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #333;
    input {
      width: 95%;
      padding: 0 8px;
      border: none;
      outline: none;
    }
    .clear {
      width: 12px;
      height: 12px;
      line-height: 12px;
      text-align: center;
      border-radius: 50%;
      background-color: #cccccc;
      font-size: 12px;
      color: #fff;
    }
  }
  .forget_password {
    font-size: 14px;
    color: #999;
    position: absolute;
    right: 30px;
    bottom: -35px;
  }
}
.button {
  text-align: center;
  margin-top: 30px;
  button {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #ff5777;
    color: #fff;
    font-size: 18px;
    border: none;
    .van-image {
      position: relative;
      top: 2px;
      left: -15px;
    }
  }
}
</style>